/*
  v-draggable 拖拽指令
	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。

	思路：
		1、设置需要拖拽的元素为absolute，其父元素为relative。
		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
		4、鼠标松开(onmouseup)时完成一次拖拽

	使用：在 Dom 上加上 v-draggable 即可
	<div class="dialog-model" v-draggable></div>
*/
import type { Directive } from "vue";
interface ElType extends HTMLElement {
  parentNode: any;
}
export const draggable: Directive = {
  // 渲染完毕
  mounted(el) {
    // 可视窗口的宽度
    const clientWidth = document.documentElement.clientWidth;
    // 可视窗口的高度
    const clientHeight = document.documentElement.clientHeight;
    // 记录坐标
    let domset = {
      x: clientWidth / 4, // 默认width 50%
      y: (clientHeight * 15) / 100, // 根据 15vh 计算
    };

    // 弹窗的容器
    const domDrag = el.firstElementChild.firstElementChild;
    // 重新设置上、左距离
    domDrag.style.marginTop = domset.y + "px";
    domDrag.style.marginLeft = domset.x + "px";

    // 记录拖拽开始的光标坐标，0 表示没有拖拽
    let start = { x: 0, y: 0 };
    // 移动中记录偏移量
    let move = { x: 0, y: 0 };

    // 鼠标按下，开始拖拽
    document.onmousedown = (e) => {
      // 判断对话框是否重新打开
      if (domDrag.style.marginTop === "15vh") {
        // 重新打开，设置 domset.y  top
        domset.y = (clientHeight * 15) / 100;
      }
      start.x = e.clientX;
      start.y = e.clientY;
      domDrag.style.cursor = "move"; // 改变光标形状
    };

    // 鼠标移动，实时跟踪
    document.onmousemove = (e) => {
      if (start.x === 0) {
        // 不是拖拽状态
        return;
      }
      move.x = e.clientX - start.x;
      move.y = e.clientY - start.y;

      // 初始位置 + 拖拽距离
      domDrag.style.marginLeft = domset.x + move.x + "px";
      domDrag.style.marginTop = domset.y + move.y + "px";
    };
    // 鼠标抬起，结束拖拽
    document.onmouseup = (e) => {
      move.x = e.clientX - start.x;
      move.y = e.clientY - start.y;

      // 记录新坐标，作为下次拖拽的初始位置
      domset.x += move.x;
      domset.y += move.y;
      domDrag.style.cursor = ""; // 恢复光标形状
      domDrag.style.marginLeft = domset.x + "px";
      domDrag.style.marginTop = domset.y + "px";
      // 结束拖拽
      start.x = 0;
    };
  },
};
